var mycomponent={
    template:
        "<div><select @change='getProvinceName' v-model='selectProvince' >" +
        "<option value='0'>请选择省份</option>" +
        "<option v-for=\"(item,index) of province\" :value=\"index+1\" >{{item.name}}</option>" +
        "</select>" +
        "<select @change='getCityName' v-model='selectCity' >" +
        "<option value='0'>请选择城市</option>" +
        "<option v-for=\"(item,index) of citys\" :value=\"index+1\" >{{item.name}}</option>" +
        "</select>" +
        "<br>" +
        "详细地址:<input v-model='detail' type=\"input\" id=\"detail\"/></div>",
    data:function(){
        return {
            province:[],
            selectProvince:0,
            selectCity:0,
            selectProvinceName:"",
            selectCityName:"",
            detail:""
        }
    },
    methods:{
        getProvinceName:function(event){
            this.selectProvinceName= event.target.options[this.selectProvince].text;
        },
        getCityName:function(event){
            this.selectCityName=event.target.options[this.selectCity].text;
        }
    },
    computed:{
        citys:function(){
            this.selectCity=0;
            var self = this;
            var cityArr=[];
            $.ajax({
                url:"/address/city?pid="+self.selectProvince,
                dataType:"JSON",
                type:"GET",
                async:false,
                success:function(data){
                    if(data.code==0){
                        cityArr = data.data;
                    }else{
                        layer.msg(data.msg);
                    }
                },
                error:function(){
                    layer.msg("客户端请求有误");
                }
            });
            return cityArr;
        },
        address:function(){
            if(this.selectProvinceName!=""&&this.selectCityName!=""&&this.detail!=""){
                return this.selectProvinceName+this.selectCityName+this.detail;
            }else{
                return ""
            }
        }
    },
    created:function(){
        var self = this;
        $.ajax({
            url:"/address/province",
            dataType:"JSON",
            type:"GET",
            success:function(data){
                if(data.code==0){
                    self.province = data.data;
                }else{
                    layer.msg(data.msg);
                }
            },
            error:function(){
                layer.msg("客户端请求有误");
            }
        });
    }
}

var mine = new Vue({
    el:"#mine",
    components:{
        address_select:mycomponent
    },
    data:{
        userInfo: {},
    },
    methods:{
        getUserInfo:function(){
            var self = this;
            $.ajax({
                url:"/loginInfo",
                type:"GET",
                data:{},
                dataType:"JSON",
                success:function(data){
                    self.userInfo=data.data;
                },
                error:function(){
                    layer.msg("客户端请求有误");
                }
            });
        },
        logout:function(){
            $.ajax({
                url:"/logout",
                type:"GET",
                success:function(data){
                    if(data.code==0){
                        window.location = "../login.html";
                    }else{
                        layer.msg(data.msg);
                    }
                },
                error:function(){
                    layer.msg("客户端请求有误");
                }
            });
        },
        updateAddress:function(){
            var self = this;
            var address = this.$refs.selectAddress.address;
            if(address){
                $.ajax({
                    url:"/user/updateAddress",
                    type:"POST",
                    data:{
                        address:address
                    },
                    success:function(data){
                        if(data.code==0){
                            self.getUserInfo();
                            layer.msg("修改成功");
                        }else{
                            layer.msg(data.msg);
                        }
                    },
                    error:function(){
                        layer.msg("客户端请求有误");
                    }
                }).then(function(){
                    $("#addressModal").modal("hide");
                });
            }else{
                layer.msg("请仔细检查，确保填写了完整的地址");
            }
        },
        shopCar:function(){
            layer.msg("敬请期待!");
        }

    },
    created:function(){
        this.getUserInfo();
    }
});

